<template>
  <div class="product-list">
    <van-nav-bar title="商品列表" left-arrow @click-left="$router.back()" />
    <div class="search-box">
      <van-icon name="search" class="search-icon" :style="$route.query.from === 'cate' ? {paddingLeft: '20%'}: ''"></van-icon>
      <input v-focus type="text" placeholder="请输入您搜索的商品" class="search-inp" :value="search">
      <van-icon name="qr" class="qr" v-show="change" @click="change=!change"></van-icon>
      <van-icon name="apps-o" class="app" v-show="!change" @click="change=!change"></van-icon>
    </div>
    <van-tabs v-model="active" @click="send">
      <van-tab :title="title" v-for="(title, index) in titles" :key="index">
      </van-tab>
    </van-tabs>

    <van-list finished-text="没有更多了" v-if="product_list.length > 0" class="list">
      <GoodsItem :item="item" v-for="item in product_list" :key="item.goods_id"></GoodsItem>
    </van-list>
    <van-empty v-else class="custom-image" image="http://cba.itlike.com/public/mweb/static/empty.png" description="亲，暂无相关数据" />
  </div>
</template>

<script>
import GoodsItem from '@/components/GoodsItem'
import { productSearch } from '@/apis/product'
export default {
  components: { GoodsItem },
  name: 'ProductList',
  data () {
    return {
      titles: ['综合', '销量', '价格'],
      active: 0,
      change: true,
      product_list: [],
      // 多组件共享detail对象
      detail: {},
      goodsImages: [],
      params: {
        goodsName: '',
        sortType: 'all',
        sortPrice: 0,
        page: 1,
        ...this.$route.query
      }
    }
  },
  computed: {
    search () {
      return this.$route.query.search
    }
  },
  created () {
    this.params.goodsName = this.search || ''
    this.getPoductList()
  },
  methods: {
    async getPoductList () {
      const res = await productSearch(this.params)
      const {
        list: { data }
      } = res.data
      if (this.params.sortPrice === 'sales') {
        this.product_list = data.sort((item1, item2) => item2.goods_sales - item1.goods_sales)
        return
      }
      this.product_list = data
    },
    send (index, title) {
      this.params.sortPrice = 'all'
      if (index === 1) {
        this.params.sortPrice = 'sales'
      } else if (index === 2) {
        this.params.sortPrice = 'price'
      }
      this.getPoductList()
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
  position: relative;
  margin: 10px;
  height: 35px;
  line-height: 35px;

  .search-icon {
    position: absolute;
    top: 50%;
    padding-left: 38%;
    transform: translateX(-50%);
    transform: translateY(-50%);
  }
  .search-inp {
    width: 92%;
    text-align: center;
    border-radius: 17.5px;
    background-color: #f7f7f7;
    border: 0;
  }
  .qr,
  .app {
    width: 8%;
    font-size: 23px;
    vertical-align: middle;
  }
}
.list {
  margin-top: 10px;
}
</style>
